<template>
  <view class="content">
	<!-- 轮播图-->
    <view class="swiper-box">
		<swiper class="swiper">
			<swiper-item v-for="item in goodsInfo.goodsImgList">
				<view class="swiper-item">
					<image mode="aspectFit" class="swiper-img" :src="item"></image>
				</view>
			</swiper-item>
			<swiper-item v-if="goodsInfo.goodsImgList.length<=0">
				<view class="swiper-item">
					<image mode="aspectFit" class="swiper-img" :src="goodsInfo.goodsImg"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<!-- 标题 -->
	<view class="title-box">
		<view class="price">
			<text>￥</text><text class="num">{{goodsInfo.salePrice}}</text><text> /{{goodsInfo.goodsUnit}}</text>
		</view>
		<view class="name">{{goodsInfo.goodsName}}</view>
	</view>
	<!-- 规格 -->
	<view class="spec-box">
		<view class="title">商品详情</view>
		<view class="spec" v-if="goodsInfo.goodsSpec!=='' || goodsInfo.goodsExpire!==''">
			<view class="left">规格：{{goodsInfo.goodsSpec || '-'}}</view>
			<view class="right">保质期：{{goodsInfo.goodsExpire  || '-'}}</view>
		</view>
	</view>
	<!-- 详情 -->
	<view class="info-box">
		<image v-for="item in goodsInfo.goodsDetailContent" mode="widthFix" :src="item" style="height: auto;"></image>
	</view>
	<!-- 底部按钮 -->
	<view class="button-box">
		<view @click="openBuy()" class="button">立即购买</view>
	</view>
	<view style="height:200rpx"></view>
	<!-- 购买弹窗 -->
	<buy ref="buy" :videoId="videoId" :fromType="fromType" :goodsInfo="goodsInfo" :shopAddress="shopAddress"></buy>
  </view>
</template>

<script>
import buy from "@/shop/components/buy.vue"
export default {
  components: {buy},
  data() {
    return {
	  isLogined: uni.getStorageSync("token"),
	  fromType:1, // 来源 1 小程序 2 app
      goodsNo:'', // 商品编号
	  videoId: '' , // 视频ID
	  goodsInfo: {
		  goodsImgList:[]
	  }, // 商品详情
	  shopAddress: '', // 门店信息
    };
  },
  onLoad(e) {
    this.goodsNo = e.goodsNo;
	this.videoId = e.videoId;
	this.fromType = e.fromType?e.fromType:1
  },
  onShow() {
	  if(!this.isLogined){
	  	this.login();
	  	return
	  }
	  this.getGoodsInfo()
	  this.getShopAddress()
  },
  methods: {
	// 获取商品详情
    async getGoodsInfo() {
	  let postData = {}
	  postData.videoId = this.videoId
      let res = await this.$javaCircle.doRequest("post", "vs/mall/getVideoGoods?videoId="+this.videoId, postData, '', true)
      if (res.data.code === 0) {
        this.goodsInfo = res.data.data
		this.goodsInfo.goodsDetailContent = JSON.parse(res.data.data.goodsDetailContent)
      }
    },
	// 获取地址详情
	async getShopAddress() {
	  let postData = {}
	  let res = await this.$javaCircle.doRequest("post", "vs/mall/getShopAddress", {}, '', true)
	  if (res.data.code === 0) {
	    this.shopAddress = res.data.data
	  }
	},
	// 打开购买弹窗
	openBuy() {
		// this.$emit('buyShow')
		this.$refs.buy.show()
	},
	// 登录
	async login() {
	  try {
	    const code = await this.wxLogin();
	    const checkLoginRes = await this.$NoteApi.doRequest("get", "login", { code, requestCode: '' });
	    const { code: checkLoginCode, data, message } = checkLoginRes.data;
	    if (checkLoginCode == 0) {
	      uni.setStorageSync("userInfo", data);
	      uni.setStorageSync("token", data.token)
	      this.getGoodsInfo()
	      this.getShopAddress()
	    } else {
	      uni.showToast({
	        title: message,
	        icon: 'none'
	      })
	    }
	  } catch (error) {
	    uni.showToast({
	        title: error,
	        icon: 'none'
	      })
	  }
	},
	// 获取code
	wxLogin() {
	  return new Promise((resolve, reject) => {
	    uni.login({
	      provider: 'weixin',
	      success: (loginRes) => {
	        resolve(loginRes.code)
	      },
	      fail: (error) => {
	        reject(error)
	      }
	    })
	  })
	},
  },
  onUnload() {
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background: #F3F5F8;
}
.swiper-box{
	width: 750rpx;
	height: 750rpx;
	position: relative;
	.swiper {
			height: 750rpx;
	}
	.swiper-item {
		display: block;
		height: 750rpx;
		line-height: 750rpx;
		text-align: center;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.swiper-img{
		width: 750rpx;
		height: 750rpx;
	}
}
.title-box{
	z-index: 1;
	position: relative;
	width: 702rpx;
	/* min-height: 253rpx; */
	margin: 0 auto;
	margin-top: -48rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(109,109,109,0.1);
	border-radius: 8rpx;
	padding: 40rpx 30rpx;
	.price{
		color: #FF2800;
		font-size:36rpx;
		.num{
			font-size:70rpx;
		}
	}
	.name{
		padding-top:20rpx;
		font-size: 46rpx;
		color: #292A30;
		line-height: 65rpx;
	}
}
.spec-box{
	width: 702rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(109,109,109,0.1);
	border-radius: 8rpx;
	padding: 40rpx 30rpx 30rpx 30rpx;
	.title{
		font-size: 46rpx;
		color: #666666;
	}
	.spec{
		padding-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 40rpx;
		color: #292A30;
		.left{
			width: 300rpx;
			text-overflow: ellipsis;
			white-space:nowrap;
			overflow: hidden;
		}
		.right{
			width: 310rpx;
			text-overflow: ellipsis;
			white-space:nowrap;
			overflow: hidden;
		}
	}
}
.info-box{
	width: 702rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(109,109,109,0.1);
	border-radius: 8rpx;
	image{
		display: flex;
		width: 100%;
		padding: 0;
		margin: 0;
		border: none; 
	}
}
.button-box{
	position: fixed;
	bottom: 0;
	left: 0;
	display:flax;
	justify-content: center;
	background-color: #ffffff;
	padding:32rpx 32rpx 60rpx 32rpx;
	.button{
		width: 686rpx;
		height: 98rpx;
		line-height:98rpx;
		background: #5CAE77;
		border-radius: 14rpx;
		font-size: 44rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
}
</style>
